<template>
    <div class="card-list">
    <div v-for="(item,index) in tousuData" :key="index">
        <Data :title="item.title" :num="item.num"></Data>
    </div>
  </div>

  <div class="shaixuan">
    <div class="shaixuan-content">
        <el-select style="width: 200px;"
            v-model="searchStatus"
          >
            <el-option
              label="全部"
              :value="-1"
            />
            <el-option
              label="待处理"
              :value="0"
            />
            <el-option
              label="已处理"
              :value="1"
            />
          </el-select>
        <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @clear="handleClear"
            />
            <el-button
              type="primary"
              @click="handleSearch"
            >
              <el-icon><Search /></el-icon>搜索
            </el-button>
    </div>
  </div>

  <div class="table">
    <el-table :data="tableData" border stripe>
        <el-table-column prop="tousu_id" label="投诉ID" width="100" />
              <el-table-column prop="tousu_image" label="投诉图片" width="80">
                <template #default="scope">
                  <img
                  v-if="scope.row.tousu_image"
                    :src="scope.row.tousu_image"
                    class="paper"
                  />
                </template>
        </el-table-column>
        <el-table-column prop="tousu_content" label="投诉内容" />
        <el-table-column prop="tousu_time" label="投诉时间" >
            <template #default="scope">
              <span>{{ formatTimestamp(scope.row.tousu_time) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="tousu_status" label="状态" >
            <template #default="scope">
              <span>{{ scope.row.tousu_status==0?'待处理':'已处理' }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
                <template #default="scope">
                  <el-button
                  v-if="scope.row.tousu_status==0"
                    type="primary"
                    size="small"
                    @click="handleedit(scope.row)"
                    >处理</el-button
                  >
                  <el-button
                    type="info"
                    size="small"
                    @click="handleView(scope.row)"
                    >查看</el-button
                  >
                </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination
              v-model:current-page="PageNo"
              v-model:page-size="PageSize"
              :total="total"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handlePageNoChange"
            />
    </div>
  </div>

  <el-dialog v-model="editshow" title="处理" width="300px">
    <div class="edit-item">
        <span>反馈:</span>
        <el-input type="textarea" style="width: 200px;" v-model="edit.tousu_fankui"/>
    </div>
    <template #footer>
        <span>
          <el-button @click="editshow = false">取消</el-button>
          <el-button
            type="primary"
            @click="handleupdate(edit)"
            >确定</el-button
          >
        </span>
      </template>
  </el-dialog>

  <el-dialog v-model="detailshow" title="详情" width="300px">
    <div class="detail-item">
        <span>投诉ID:</span>
        <span>{{ detail.tousu_id }}</span>
    </div>
    <div class="detail-item">
        <span>投诉内容:</span>
        <span>{{ detail.tousu_content }}</span>
    </div>
    <div class="detail-item">
        <span>投诉图片:</span>
        <el-image v-if="detail.tousu_image" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[detail.tousu_image]" show-progress :initial-index="0" class="paper" :src="detail.tousu_image"></el-image>
    </div>
    <div class="detail-item">
        <span>投诉时间:</span>
        <span>{{ formatTimestamp(detail.tousu_time) }}</span>
    </div>
    <div class="detail-item">
        <span>状态:</span>
        <span>{{ detail.tousu_status==0?'待处理':'已处理' }}</span>
    </div>
    <div v-if="detail.tousu_status==1" class="detail-item">
        <span>反馈内容:</span>
        <span>{{ detail.tousu_fankui }}</span>
    </div>
    <div class="detail-item">
        <span>投诉发起者:</span>
        <span>{{ detail.user_nickname }}</span>
    </div>
  </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import {ref,reactive,onBeforeMount,computed} from 'vue'
  import { Search,Plus} from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import Data from './Data.vue';
  import { GetTousuData,GetTousus,UpdateTousu } from '@/service/api/tousu';
import { ta } from 'element-plus/es/locale';
  let tousuData=reactive([
    {
        title:'待处理',
        num:'0'
    },
    {
        title:'已处理',
        num:'0'
    },
    {
        title:'本月投诉',
        num:'0'
    },
    {
        title:'处理率',
        num:'0'
    }
])
let searchStatus=ref(-1)
let PageNo=ref(1)
let PageSize=ref(10)
let total=ref(0)
let dateRange=ref([])
let tableData=ref([])
let detail=ref({})
let edit=ref({})
let editshow=ref(false)
let detailshow=ref(false)
onBeforeMount(()=>{
  gettousudata();
  gettousus()
})

function handleupdate(item){
  UpdateTousu({
    tousu_id:item.tousu_id,
    tousu_status:1,
    tousu_fankui:item.tousu_fankui
  }).then(res=>{
    if(res.data.code==200){
      PageNo.value=1
      tableData.value=[]
      gettousudata()
      gettousus()
      editshow.value=false
      ElMessage.success('处理成功')
    }
  })
}
function handleedit(item){
  edit.value=JSON.parse(JSON.stringify(item))
  editshow.value=true
}
function handleView(item){
    detail.value=item
    detailshow.value=true
}
  function handleSizeChange(value){
    tableData.value=[]
    PageSize.value=value
    gettousus()
}

function handlePageNoChange(value){
    tableData.value=[]
    PageNo.value=value
    gettousus()
}
function handleClear(){
    dateRange.value=[]
}
function handleSearch(){
    tableData.value=[]
    PageNo.value=1
    gettousus()
}
function gettousus(){
  GetTousus({
    PageNo:PageNo.value,
    PageSize:PageSize.value,
    searchStatus:searchStatus.value,
    starttime:dateRange.value[0]?new Date(dateRange.value[0]).getTime():null,
    endtime:dateRange.value[1]?new Date(dateRange.value[1]).getTime():null
  }).then(res=>{
    if(res.data.code==200){
      tableData.value=[...tableData.value,...res.data.data.tousus]
      total.value=res.data.data.total
    }
  })
}
function gettousudata(){
  GetTousuData().then(res=>{
    if(res.data.code===200){
      tousuData[0].num=res.data.data.waittotal;
      tousuData[1].num=res.data.data.chulitotal;
      tousuData[2].num=res.data.data.newtotal;
      tousuData[3].num=((res.data.data.chulitotal+res.data.data.waittotal)==0?'100':String(Math.floor((res.data.data.chulitotal/(res.data.data.chulitotal+res.data.data.waittotal))*100)))+'%';
    }
  })
}
function formatTimestamp(timestamp) {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hours = date.getHours()
  const minutes = date.getMinutes()
  const formattedMonth = month < 10 ? '0' + month : month
  const formattedDay = day < 10 ? '0' + day : day
  const formattedHours = hours < 10 ? '0' + hours : hours
  const formattedMinutes = minutes < 10 ? '0' + minutes : minutes
 
  return `${year}-${formattedMonth}-${formattedDay} ${formattedHours}:${formattedMinutes}`
}
  </script>
  
  <style lang="scss" scoped>
  @import url("@/assets/css/view.scss");
</style>
  